<template>
  <el-drawer
    class="drawer-layer normal"
    :with-header="false"
    :visible.sync="showDrawer"
    @close="handleCloseEvent"
  >
    <h2 class="word-title">请选择文章分类</h2>
    <el-radio-group v-model="wordType" size="small">
      <el-radio-button v-for="(item, index) of wordTypes" :key="index" :label="item.name"></el-radio-button>
    </el-radio-group>

    <h2 class="word-title">请选择文章标签</h2>
    <el-select v-model="wordTags" filterable multiple default-first-option placeholder="请选择文章标签">
      <el-option v-for="item of options" :key="item.value" :label="item.name" :value="item.name"></el-option>
    </el-select>

    <h2 class="word-title">请上传文章封面</h2>
    <el-upload
      class="upload-plugins"
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      :limit="3"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <div class="complete-operations flex-evenly">
      <el-button @click="handleCloseEvent">取消</el-button>
      <el-button @click="handleSubmitEvent">发布</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Boolean,
      required: true
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    wordTypes: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      wordTags: [], // 选中的文章标签
      wordType: '', // 选中的文章分类
      showDrawer: false, // 显示选择标签、分类栏
      fileList: [], // 上传的文件
    }
  },

  methods: {
    handleCloseEvent() {
      this.$emit('close', false)
    },
    handleSubmitEvent() {
      let category_id = 0;
      this.wordTypes.findIndex((item) => {
        if (item.name === this.wordType) {
          category_id = item.id;
        }
      });
      this.$emit('submit', {
        type: category_id,
        tag: this.wordTags,
        files: this.fileList
      })
    }
  },

  watch: {
    drawer(newVal, oldVal) {
      this.showDrawer = newVal;
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-layer {
  /deep/ .el-drawer__body {
    padding: 20px;
  }

  /deep/ .el-radio-button:focus {
    box-shadow: none !important;
  }

  .word-title {
    margin-bottom: 10px;
  }

  .el-radio-group {
    margin-bottom: 50px;

    /deep/ .el-radio-button__inner {
      border-radius: 0;
      border-width: 1px;
      margin: 0 5px 5px 0;
      border: 1px solid var(--border);
      box-shadow: none;
    }
  }

  .el-select {
    width: 100%;
    margin-bottom: 50px;

    /deep/ .el-input__inner {
      width: 100%;
      border: 0;
      padding-left: 5px;
    }

    /deep/ .el-select__input {
      margin-left: 5px;
    }
  }

  .complete-operations {
    margin: 50px 0;
  }
}
</style>